/*
 * Copyright © 2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

$page-li-size: 22px;
$current-page-background-color: rgba(93, 103, 137, 1);
$hovered-page-background-color: rgba(219, 219, 219, 1);

.pagination-with-title {
  float: right;
  margin-right: 50px;
  margin-bottom: initial;

  .total-entities {
    display: inline-block;
    vertical-align: top;

    span {
      font-weight: bold;
      font-size: 12px;
    }
  }

  .page-list {
    padding-left: 16px;
    list-style-type: none;
    display: inline-block;
    margin-bottom: 0;
    vertical-align: top;

    li {
      font-weight: bold;
      display: inline-block;
      border-radius: 100%;

      a,
      span {
        display: flex;
        height: $page-li-size;
        width: $page-li-size;
        justify-content: center;
        align-items: center;
        color: inherit;
        user-select: none;

        &:hover,
        &:focus {
          text-decoration: none;
          outline: 0;
        }
      }

      &:not(:first-child) {
        margin-left: 15px;
      }

      &.current-page {
        background-color: $current-page-background-color;

        a {
          color: #ffffff;
        }
      }

      &.ellipsis {
        margin-left: 5px;
        margin-right: -10px;

        span {
          user-select: none;
        }
      }

      &:hover {
        &:not(.current-page):not(.ellipsis) {
          cursor: pointer;
          background-color: $hovered-page-background-color;
        }
      }
    }
  }
}
